<template>
	<view class="content">
		<view class="infoList">
			<view class="info" v-for="(item,i) in list" :key="i" @click="lifeInfo" :data-id="item.id" >
				<view>
					<u--image width="350rpx" :src="item.image"></u--image>
				</view>
				<view class="infoDesc">
					<view class="infoTitle">{{item.title}}</view>
					<view class="infoUser">
						<view class="user flex">
							<view><u--image width="50rpx" height="50rpx" :src="item.user_logo_image"></u--image></view>
							<view>{{item.author}}</view>
						</view>
						<view class="thumbUp flex" @tap.stop.prevent>
							<view @click.stop="thumbUpClick" :data-id="item.id" ><u-icon name="thumb-up" :color="item.upcolor == true ? 'red':''"   size="18"></u-icon></view>
							<view>{{item.nice_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="addShowClass" @click="add"  >
			<u-icon name="plus-circle-fill" color="#fe4370"  size="55"></u-icon>
		</view>
		<buttonNav :active="active"></buttonNav>
	</view>
</template>

<script>
	import http from "@/apis/http.js";
	import buttonNav from '@/components/bottomNav.vue';
	export default {
		components:{
			buttonNav
		},
		data() {
			return {
				active:2,
				addShowClass:['add'],
				page:0,
				list:[],
			}
		},
		methods: {
			add(){
				uni.navigateTo({
					url:'/pages/tourismLife/add'
				})
			},
			addShow(){
				http.POST('index/systemInfo').then(res=>{
					if(res.data.userAddArticle == 1){
						this.$set(this.addShowClass,1,'show');
					}else{
						this.$set(this.addShowClass,1,'hidden');
					}
				})
			},
			getTourismLifeList(){
				http.POST('tourism_life/list',{'page':this.page}).then(res=>{
					this.list.push(...res.data)
				})
			},
			thumbUpClick(v){
				let id = v.currentTarget.dataset.id;
				http.POST('tourism_life/thumb_up',{'id':id}).then(res=>{
					if(res.code == 1){
						uni.showToast({
							'title':'成功',
							'icon':'none'
						})
						for(var l in this.list){
							if(this.list[l].id == id){
								this.list[l].upcolor = !this.list[l].upcolor;
								if(this.list[l].upcolor){
									this.list[l].nice_num++;
								}else{
									this.list[l].nice_num--;
								}
							}
						}
					}else{
						uni.showToast({
							'title':res.msg,
							'icon':'none'
						})
					}
				})
			},
			lifeInfo(v){
				let id = v.currentTarget.dataset.id;
				uni.navigateTo({
					url:'/pages/tourismLife/lifeInfo?id='+id
				})
			}
		},
		onLoad() {
			this.getTourismLifeList()
			this.addShow();
		},
		onReachBottom (){
			this.page++;
			this.getTourismLifeList()
		}
	}
</script>

<style>
	.hidden{display: none;}
	.show{display: block;}
	.add {
		position: fixed;
		bottom: 160rpx;
		right: 20rpx;
	}
	.infoList {  display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 10rpx;
	padding-bottom: calc(var(--window-bottom) + 150rpx);
	}
	.info { border-radius: 20rpx; display: flex; flex-direction: column; width: 350rpx;  margin-bottom: 20rpx;  box-shadow: 0 0 4rpx 3rpx #eeeeee;}
	.content {
		padding: 0 20rpx;
		background-color: #f9fafe;
		padding-bottom: calc(var(--window-bottom) + 150rpx);
		min-height: 1000rpx;
	}
	.infoDesc { padding:20rpx 10rpx;}
	.infoTitle {font-weight: bold; margin-bottom: 15rpx;}
	.infoUser { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 20rpx;;}
	.flex { display: flex; }
	.user {color: #646464; }
</style>
